<template>
  <div class="app-container">
    <div class="center-parent">
      <div class="dox-class center-child" v-loading="loading">
        <el-empty class="center-child" v-if="isEmpty(bank)" description="未查询到可使用题库">
          <el-button type="primary" @click="applyBank">刷新</el-button>
        </el-empty>

        <!-- 报名 -->
        <el-collapse v-else v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <h1 style="font-weight: bold;margin-left: 10px">考试信息</h1>
              <div style="margin-left: 500px;">
                <el-button :type="ex_button.type" size="small" :disabled="ex_button.disabled" @click="startEx" plain>{{ex_button.name}}</el-button>
              </div>
            </template>
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item label="考试名称">{{bank.name}}</el-descriptions-item>
              <el-descriptions-item label="总题数">{{bank.total}}</el-descriptions-item>
              <el-descriptions-item label="类别">
                <dict-tag :options="dict.type.ex_question_bank_train" :value="bank.trainFlag"/>
              </el-descriptions-item>
              <el-descriptions-item label="可选择考试时间范围">
                <el-date-picker readonly v-model="bank.reservedOneList" type="daterange" range-separator="~"></el-date-picker>
              </el-descriptions-item>
              <el-descriptions-item label="可选择预约时间范围">
                <el-date-picker readonly v-model="bank.appointDateRange" type="daterange" range-separator="~"></el-date-picker>
              </el-descriptions-item>

              <el-descriptions-item label="预约状态">
                <el-tag v-if="isNotEmpty(reload)" type="success">已预约</el-tag>
                <el-tag v-else type="danger">未预约</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotEmpty(reload)" label="考试时间">{{reload.exDate}}</el-descriptions-item>
              <el-descriptions-item v-if="isNotEmpty(reload)" label="考试时间范围">
                <el-tag type="success" effect="plain" style="margin-right: 10px">{{ reload.exTimeObj.name }}</el-tag>
                <el-time-select readonly v-model="reload.exTimeObj.time[0]" value-format="HH:mm:ss" size="mini" style="width: 120px"></el-time-select> ~
                <el-time-select readonly v-model="reload.exTimeObj.time[1]" value-format="HH:mm:ss" size="mini" style="width: 120px"></el-time-select>
              </el-descriptions-item>
              <el-descriptions-item v-if="isNotEmpty(reload)" label="考试成绩">{{reload.score}}</el-descriptions-item>
              <el-descriptions-item v-if="isNotEmpty(reload)" label="对题数">{{reload.right}}</el-descriptions-item>
              <el-descriptions-item v-if="isNotEmpty(reload)" label="考试状态">
                <el-tag v-if="reload.status == '0' || reload.status == '1'" type="info">未完成</el-tag>
                <el-tag v-else type="success">已完成</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item name="2" v-if="isEmpty(reload) && this.bank.applyOk">
            <template slot="title">
              <h1 style="font-weight: bold;margin-left: 10px">报名</h1>
            </template>
            <el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item class="ml10" label="考试时间" prop="exDate">
                <el-select v-model="form.exDate" placeholder="请选择考试时间" size="mini" class="input-w-160" clearable>
                  <el-option v-for="(item,index) in bank.exDateRange" :key="item" :label="item" :value="item">
                    <i class="el-icon-date"></i>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="ml10" label="考试时间范围" prop="exTime">
                <el-radio v-for="(item,index) in bank.reservedTwoList" v-model="form.exTime" :label="item">
                  <el-tag :type="index % 2 === 0 ? 'success' : 'warning'" effect="plain" style="margin-right: 10px">{{ item.name }}</el-tag>
                  <el-time-select readonly v-model="item.time[0]" value-format="HH:mm:ss" size="mini" style="width: 120px"></el-time-select> ~
                  <el-time-select readonly v-model="item.time[1]" value-format="HH:mm:ss" size="mini" style="width: 120px"></el-time-select>
                </el-radio>
              </el-form-item>
              <el-form-item>
                <el-button :type="apply_button.type" @click="apply" :disabled="apply_button.disabled" style="float: left;margin-left: 300px" plain>{{apply_button.name}}</el-button>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import {question_apply} from "@/api/ex/question_bank";
import {addEx_study_reload} from "@/api/ex/ex_study_reload";
import {toJsonStr,isEmpty,isNotEmpty} from "@/utils/zzDouUtils/ObjUtil";

export default {
  name: "Test_bank",
  dicts: ['ex_question_bank_train'],
  data() {
    return {
      ex_button:{
        type: null,
        name: null,
        disabled: true,
      },
      apply_button:{
        type: 'primary',
        name: '报名',
        disabled: false,
      },
      activeNames:['1'],
      loading:false,
      bank: {
        exDateRange:null,
        reservedTwoList:null,
      },
      reload: null,
      ok: true,
      form:{
        exTime:null,
        exDate:null
      },
      rules:{
        exTime: [
          { required: true, message: '请选择考试时间范围', trigger: 'blur' },
        ],
        exDate: [
          { required: true, message: '请选择考试时间', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.applyBank()
  },
  methods: {
    applyBank(){
      this.loading = true;
      question_apply().then( response =>{
        const status = response.masterStatus;
        this.bank = response.data;
        this.reload = response.reload;
        switch (status){
          case 0:{
            this.ex_button = {name: '开始考试',type: 'primary',disabled: false }//考试按钮状态
          }break;
          case 1:{
            this.ex_button = {name: '尚未开始',type: 'info',disabled: true }//考试按钮状态
          }break;
          case 2:{
            this.ex_button = {name: '已结束',type: 'danger',disabled: true }//考试按钮状态
          }break;
          case 3:{
            this.ex_button = {name: '查看试卷',type: 'success',disabled: false }//考试按钮状态
          }break;
          case 4:{
            this.ex_button = {name: '未报名',type: 'warning',disabled: true }//考试按钮状态
            //预约按钮状态
            if (!this.bank.applyOk){
              this.apply_button = {name: '不在报名时间范围内',type: 'info',disabled: true }
            }
          }break;
        }
        this.loading = false;
      })
    },
    /** 跳转考试页面 */
    startEx(){
      this.$router.push('/ex/test_bank-do_ex_test/index/' + this.bank.id + '/' + 0)
    },
    //报名
    apply(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.exTime = toJsonStr(this.form.exTime);
          addEx_study_reload(this.form).then(response=>{
            this.$message.success("报名成功");
            this.form = {exTime:null, exDate:null};
            this.applyBank();
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
.dox-class{
  width: 700px;
  height: 500px;
  //border: solid 1px black;
}
.form-class{
  margin-top: 40px;
  width: 700px;
  border: solid 3px #34bfa3;
}
</style>
